<template>
	<view class="content">
		<view class="order-tp">
			<view class="order-bg">
				<text>{{order_info.status_name}}</text>
			</view>
			<view class="order-state">
				<view class="order-li" :class="order_info.status_history[2] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-a-daijiedan1"></text>
					</view>
					<view class="order-name">技师接单</view>
				</view>
				<view class="order-li" :class="order_info.status_history[3] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-toyCar-fill"></text>
					</view>
					<view class="order-name">技师出发</view>
				</view>
				<view class="order-li" :class="order_info.status_history[4] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-qiandaoquhao"></text>
					</view>
					<view class="order-name">技师到达</view>
				</view>
				<view class="order-li" :class="order_info.status_history[5] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-noun_massage_2460811"></text>
					</view>
					<view class="order-name">开始服务</view>
				</view>
				<view class="order-li" :class="order_info.status_history[6] ? 'order-step' : ''">
					<view class="order-icon">
						<text class="iconfont icon-icon"></text>
					</view>
					<view class="order-name">服务完成</view>
				</view>
			</view>
		</view>

		<view class="tech-eva-con">
			<view class="place-rem-tit">
				<text>服务项目</text>
				<text></text>
			</view>
			<block v-for="(item, index) in order_info.order_detail" :key="index">
				<view class="service">
					<view class="ser-img" :style="'background-image: url('+item.images+');'"></view>
					<view class="ser-con">
						<view class="ser-tit">
							<text>{{item.title}}</text>
							<text>x{{item.buy_number}}</text>
						</view>
						<view class="ser-des">服务技师：{{order_info.techn_info.nickname}}</view>
						<view class="ser-pri">
							<view class="ser-pri-lf">
								<text>{{item.duration}}分钟</text>
								<text>{{item.price}}</text>
								<text></text>
							</view>
						</view>
					
					</view>
				</view>
			</block>	
		</view>

		<view class="place-addr">
			<view class="place-rem-tit">
				<text>用户信息</text>
				<text>距您{{order_info.distance}}km</text>
			</view>
			<view class="place-name">
				<text>{{order_info.order_address.name}}</text>
				<!-- <text>{{order_info.order_address.star_mobile}}</text> -->
				<text>查看标签</text>
				<text class="iconfont icon-24gl-phoneLoudspeaker" v-if="order_info.contact_type ==1 " @click="contactFun">联系客户</text>
			</view>
			<view class="place-addr-con">
				<text>{{order_info.order_address.address}}{{order_info.order_address.address_des}}</text>
				<text class="iconfont icon-dingwei" @click="goPlace(order_info.order_address.lng, order_info.order_address.lat)">导航去</text>
			</view>
		</view>

		<view class="place-time">
			<view class="place-time-tp">
				<view class="place-time-name">下单时间</view>
				<view class="place-time-con">
					<text>{{order_info.add_time_time}}</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">预约服务时间</view>
				<view class="place-time-con">
					<text>{{order_info.pre_start_time_time}}</text>
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">预计结束时间</view>
				<view class="place-time-con">
					<text>{{order_info.pre_end_time_time}}</text>
				</view>
			</view>
			
			<view class="place-time-tp">
				<view class="place-time-name">服务时长</view>
				<view class="place-time-con">
					<text>{{order_info.buy_number_duration}}分钟</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">服务费用</view>
				<view class="place-time-con">
					<text>￥{{order_info.price}}</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">出行方式</view>
				<view class="place-time-con">
					<text>出租车</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">车费</view>
				<view class="place-time-con">
					<text>￥{{order_info.travel_price}}</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">优惠券</view>
				<view class="place-time-con">
					<text>￥0</text>
				</view>
			</view>
			<view class="place-time-tp">
				<view class="place-time-name">支付方式</view>
				<view class="place-time-con">
					<text>{{order_info.payment_name}}支付</text>
				</view>
			</view>
		</view>

		<view class="order-plan">
			<view class="order-no">
				<text>订单编号：</text>
				<text>{{order_info.order_no}}</text>
				<text @click="copyOrderNoFun(order_info.order_no)">复制</text>
			</view>
			<view class="tra-con">
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[2] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">技师接单</view>
						<view class="order-t">
							<block v-if="order_info.status_history[2]">
								{{order_info.meet_time_time}}
							</block>
							<block v-else>
								状态未更新
							</block>
						</view>
					</view>
				</view>
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[3] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">技师出发</view>
						<block v-if="order_info.status_history[3]">
							<view class="order-t">{{order_info.leave_time_time}}</view>
							<block v-if="order_info.status_history[3]['extension_data'] && order_info.status_history[3]['extension_data']['address']">
								<view class="order-d">
									<text class="iconfont icon-dizhi">{{order_info.status_history[3]['extension_data']['address']['address']}}</text>
								</view>
							</block>
						</block>
						<block v-else>
							<view class="order-t">状态未更新</view>
						</block>
					</view>
				</view>
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[4] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">技师到达</view>
						<block v-if="order_info.status_history[4]">
							<view class="order-t">{{order_info.arrive_time_time}}</view>
							<block v-if="order_info.status_history[4]['extension_data'] && order_info.status_history[4]['extension_data']['images']">
								<view class="order-m">
									<block v-for="(item, index) in order_info.status_history[4]['extension_data']['images']" :key="index">
									    <image :src="app_url+item" mode="aspectFill"></image>
								    </block>
								</view>
							</block>
							<block v-if="order_info.status_history[4]['extension_data'] && order_info.status_history[4]['extension_data']['address']">
								<view class="order-d">
									<text class="iconfont icon-dizhi">{{order_info.status_history[4]['extension_data']['address']['address']}}</text>
								</view>
							</block>
						</block>
						<block v-else>
							<view class="order-t">状态未更新</view>
						</block>
					</view>
				</view>
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[5] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">开始服务</view>
						<view class="order-t">
							<block v-if="order_info.status_history[5]">
								{{order_info.service_time_time}}
							</block>
							<block v-else>
								状态未更新
							</block>
						</view>
					</view>
				</view>
				<view class="order-l">
					<view class="order-i">
						<text class="iconfont" :class="order_info.status_history[6] ? 'icon-dui' : 'icon-dui1'"></text>
					</view>
					<view class="order-b">
						<view class="order-n">服务完成</view>
						<block v-if="order_info.status_history[6]">
							<view class="order-t">{{order_info.over_time_time}}</view>
							<block v-if="order_info.status_history[6]['extension_data'] && order_info.status_history[6]['extension_data']['address']">
								<view class="order-d">
									<text class="iconfont icon-dizhi">{{order_info.status_history[6]['extension_data']['address']['address']}}</text>
								</view>
							</block>
						</block>
						<block v-else>
							<view class="order-t">状态未更新</view>
						</block>
					</view>
				</view>
			</view>
		</view>

		<view class="h110"></view>

		<view class="tech-order">
			<view class="tech-price">
				<text>合计：</text>
				<text>￥{{order_info.total_price}}</text>
			</view>
			<view class="tech-btn">

				<text class="tech-act" v-if="order_info.status == 1" @click="noMeetFun">拒绝接单</text>
				<text v-if="order_info.status == 1" @click="yesMeetFun">立即接单</text>
				
				<text v-if="order_info.status == 2" @click="setOutViewShow">确认出发</text>
                
				<text v-if="order_info.status == 3" @click="arriveViewShow">确认到达</text>

				<text v-if="order_info.status == 4" @click="startService">开始服务</text>
				
				<!--<text v-if="order_info.status >= 1 && order_info.status <= 4" @click="contactFun">电话</text>-->

				<text v-if="order_info.status == 5" @click="overViewShow">完成服务</text>
				
				<text v-if="order_info.techn_is_repair == 1 && order_info.techn_repair_sid == 0" @click="repairFun">立即补单</text>
			</view>
		</view>
		
        <!-- 确认出发弹窗 -->		
		<view class="order-pop" :hidden="set_out_view_hidden">
			<view class="pop-area">
				<view class="pop-tit">确认出发</view>
				<view class="pop-con">
					当前位置：{{techn_last_address.address}}
				</view>
				<view class="pop-btn">
					<text @click="setOutViewHide">取消</text>
					<text @click="leaveFun">确认</text>
				</view>
			</view>
		</view>

        <!-- 确认到达弹窗-->
		<view class="order-pop" :hidden="arrive_view_hidden">
			<view class="pop-area">
				<view class="pop-tit">确认到达</view>
				<view class="pop-con">
					<view class="feed-tit">拍照打卡：<text>自拍（着工装工牌）</text></view>
					<view class="feed-con">
						<block v-for="(item, index) in techn_last_images" :key="index">
							<view class="apply-img">
								<image :src="app_url+item" mode="aspectFill" class="photo"></image>
								<image src="../../static/del.png" mode="widthFix" class="del" @click="delImg(index)"></image>
							</view>
						</block>						
						<view class="apply-img" @click="uploadImg" v-if="techn_last_images.length < 3">
						  <image src="../../static/icon-img.png" mode="widthFix"  class="photo"></image>
						</view>	
					</view>
					当前位置：{{techn_last_address.address}}
				</view>
				<view class="pop-btn">
					<text @click="arriveViewHide">取消</text>
					<text @click="arriveFun">确认</text>
				</view>
			</view>
		</view>
		
        <!-- 确认完成弹窗 -->
		<view class="order-pop" :hidden="over_view_hidden">
			<view class="pop-area">
				<view class="pop-tit">确认完成</view>
				<view class="pop-con">
					<!--<view class="place-rem-tit">
						<text>客户评价</text>
						<text></text>
					</view>
					<view class="eva-star">
						<text class="eva-act">1星</text>
						<text>2星</text>
						<text>3星</text>
						<text>4星</text>
						<text>5星</text>
					</view>
					<view class="place-rem-tit">
						<text>用户来源</text>
						<text></text>
					</view>
					<view class="eva-star">
						<text  class="eva-act">抖音广告</text>
						<text>电梯广告</text>
						<text>朋友推荐</text>
						<text>技师推荐</text>
						<text>微信</text>
					</view>-->
					当前位置：{{techn_last_address.address}}
				</view>
				<view class="pop-btn">
					<text @click="overViewHide">取消</text>
					<text @click="overFun">确认</text>
				</view>
			</view>
		</view>


<!-- 客户标签弹窗
		<view class="order-pop">
			<view class="pop-area">
				<view class="pop-tit">客户标签</view>
				<view class="pop-con">
					<view class="eva-star eva-star1">
						<text>1星（5）</text>
						<text>2星（12）</text>
						<text>3星（8）</text>
						<text>4星（9）</text>
						<text>5星（2）</text>
					</view>
				</view>
				<view class="pop-btn">
					<text>关闭</text>
					<text style="display: none;">确认</text>
				</view>
			</view>
		</view>
-->
	
	</view>
</template>

<script>
const app = getApp();
const request = require('../../utils/request');
export default {
    data() {
        return {
			/**
			 * 网址
			 */
			app_url:app.globalData.app_url,
			order_id:'', //订单id
			order_info:{}, //订单详情
			
			techn_last_address:{}, //技师实时地址
			techn_last_images:[], //技师实时图片
			//确认出发弹框显示(默认true隐藏)
			set_out_view_hidden:true,
			//确认到达弹框显示(默认true隐藏)
			arrive_view_hidden:true,
			//完成服务弹框显示(默认true隐藏)
			over_view_hidden:true,
		}
    },
	onLoad(options)
	{
		//console.log(options);
		var that = this;
		if(options.order_id)
		{
			that.order_id = options.order_id;
		}
	},
	onShow()
	{
		var that = this;
		that.load_order_detail(); //加载订单详情
	},
    methods: {
		goEvaluate(){
	        uni.navigateTo({
	            url: '/pages/order/evaluate'
	        })
	    },
	    /**
		 * 加载订单详情
		 */
		load_order_detail:function()
		{
			var that = this;
			let order_id = that.order_id;
			//网络请求
			request(app.globalData.api_url+'/v1/order/detail', 'POST', {order_id:order_id}).then((res) => {
				if(res.data.code == 0)
				{
					that.order_info = res.data.data;
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		/**
		 * 去导航
		 */
		goPlace:function(lng, lat)
		{
			uni.openLocation({
				latitude:lat*1,
				longitude:lng*1
			});
		},
		/**
		 * 复制订单号
		 */
		copyOrderNoFun:function(order_no)
		{
			uni.setClipboardData({
				data:order_no,
				success:function()
				{
					uni.showToast({
						title:'复制成功',
						icon:'none'
					});
				}
			});
		},
		/**
		 * 立即接单
		 */
		yesMeetFun:function()
		{
			//console.log('立即接单');
			var that = this;
			let formData = {
				order_id:that.order_id
			};
			uni.showModal({
				title: '温馨提示',
				content: '您确定立即接单吗？',
				confirmText: '确认',
				cancelText: '暂不',
				success: (result) => {
					if (result.confirm) {
						//网络请求
						request(app.globalData.api_url+'/v1/order/yes_meet', 'POST', formData).then((res) => {
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							});
							if(res.data.code == 0)
							{
								that.load_order_detail(); //加载订单详情
							}else
							{
								app.is_login_check(res.data);
								app.is_techn_check(res.data);
							}
						});
					}
				}
			});
		},
		/**
		 * 确认出发显示弹出框
		 */
		setOutViewShow:function()
		{
			var that = this;
			that.locateAddress().then((res) => {
				if(res.data.code == 0)
				{
					//数据
					that.techn_last_address = res.data.data;
				    //弹出框显示
					that.set_out_view_hidden = false;
				}
			});
		},
		/**
		 * 确认出发隐藏弹出框
		 */
		setOutViewHide:function()
		{
			var that = this;
			that.set_out_view_hidden = true;
		},
		/**
		 * 根据坐标获取当前地址信息
		 */
		locateAddress:function()
		{
			var that = this;
			return new Promise(function(resolve, reject){
				uni.getLocation({
					type:'gcj02',
					success:function(loc_res)
					{
						if(loc_res.errMsg == "getLocation:ok")
						{
							//console.log(loc_res);
							let lng = loc_res.longitude;
							let lat = loc_res.latitude;
							//参数
							var formData = {
								lng:lng,
								lat:lat
							};
							//网络请求
							request(app.globalData.api_url+'/v1/publics/loc_get_address', 'POST', formData).then((res) => {
								//console.log(res);
								resolve(res);
							}).catch((err) => {
								reject(err);
							});
						}
					}
				});
			});
		},
		/**
		 * 确认出发提交
		 */
		leaveFun:function()
		{
			//console.log('确认出发提交');
			var that = this;
			let formData = {
				order_id:that.order_id,
				techn_last_address:that.techn_last_address
			};
			//网络请求
			request(app.globalData.api_url+'/v1/order/leave', 'POST', formData).then((res) => {
				if(res.data.code == 0)
				{
					that.load_order_detail(); //加载订单详情
					that.setOutViewHide(); //弹框取消
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		/**
		 * 确认到达弹出框显示
		 */
		arriveViewShow:function()
		{
			//console.log('确认到达');
			var that = this;
			that.locateAddress().then((res) => {
				if(res.data.code == 0)
				{
					//数据
					that.techn_last_address = res.data.data;
					//清空图片
					that.techn_last_images = [];
					//弹出框显示
					that.arrive_view_hidden = false;
				}
			});
		},
		/**
		 * 确认到达弹出框隐藏
		 */
		arriveViewHide:function()
		{
			var that = this;
			that.arrive_view_hidden = true;
		},
		/**
		 * 确认到达提交
		 */
		arriveFun:function()
		{
			//console.log('确认到达提交');
			var that = this;
			let formData = {
				order_id:that.order_id,
				techn_last_address:that.techn_last_address,
				techn_last_images:that.techn_last_images
			};
			//网络请求
			request(app.globalData.api_url+'/v1/order/arrive', 'POST', formData).then((res) => {
				if(res.data.code == 0)
				{
					that.load_order_detail(); //加载订单详情
					that.arriveViewHide(); //取消弹框
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		/**
		 * 上传图片
		 */
		uploadImg:function()
		{
			var that = this;
			uni.chooseMedia({
				count:1,
				mediaType:['image'],
				sourceType:['camera'],
				sizeType:['compressed'],
				success:function(media_res)
				{
					if(media_res.errMsg == "chooseMedia:ok")
					{
						uni.showLoading({
							title:'上传中...',
							mask:true
						});
						let tempFilePath = media_res.tempFiles[0]['tempFilePath'];
						//网络请求
						uni.uploadFile({
							url:app.globalData.api_url+'/v1/publics/upload_images',
							filePath:tempFilePath,
							name:'file',
							formData:{
								'path':'order',
								'types':''
							},
							success:function(res)
							{
								uni.hideLoading();
								let data = JSON.parse(res.data);
								if(data.code == 0)
								{
									let techn_last_images = that.techn_last_images;
									techn_last_images = techn_last_images.concat(data.data.url);
									that.techn_last_images = techn_last_images;
								}else
								{
									uni.showToast({
										title:data.msg,
										icon:'none'
									});
								}
							}
						});
					}
				}
			});
		},
		/**
		 * 删除图片
		 */
		delImg:function(index)
		{
			var that = this;
			let techn_last_images = that.techn_last_images;
			techn_last_images.splice(index,1);
			that.techn_last_images = techn_last_images;
		},
		/**
		 * 开始服务
		 */
		startService:function()
		{
			//console.log('开始服务');
			var that = this;
			let formData = {
				order_id:that.order_id
			};
			uni.showModal({
				title: '温馨提示',
				content: '您确定开始服务吗？',
				confirmText: '确认',
				cancelText: '暂不',
				success: (result) => {
					if (result.confirm) {
						//网络请求
						request(app.globalData.api_url+'/v1/order/start_service', 'POST', formData).then((res) => {
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							});
							if(res.data.code == 0)
							{
								that.load_order_detail(); //加载订单详情
							}else
							{
								app.is_login_check(res.data);
								app.is_techn_check(res.data);
							}
						});
					}
				}
			});
		},
		/**
		 * 完成服务显示弹出框
		 */
		overViewShow:function()
		{
			//console.log('完成服务显示弹出框');
			var that = this;
			that.locateAddress().then((res) => {
				if(res.data.code == 0)
				{
					//数据
					that.techn_last_address = res.data.data;
					//弹出框显示
					that.over_view_hidden = false;
				}
			});
		},
		/**
		 * 完成服务隐藏弹出框
		 */
		overViewHide:function()
		{
			var that = this;
			that.over_view_hidden = true;
		},
		/**
		 * 确认完成提交
		 */
		overFun:function()
		{
			//console.log('确认完成提交');
			var that = this;
			let formData = {
				order_id:that.order_id,
				techn_last_address:that.techn_last_address,
			};
			//网络请求
			request(app.globalData.api_url+'/v1/order/over', 'POST', formData).then((res) => {
				if(res.data.code == 0)
				{
					that.load_order_detail(); //加载订单详情
					that.overViewHide(); //服务完成弹出框隐藏
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		/**
		 * 拒绝接单
		 */
		noMeetFun:function()
		{
			//console.log('拒绝接单');
			var that = this;
			let formData = {
				order_id:that.order_id
			};
			uni.showModal({
				title: '温馨提示',
				content: '您确定拒绝接单吗？',
				confirmText: '确认',
				cancelText: '暂不',
				success: (result) => {
					if (result.confirm) {
						//网络请求
						request(app.globalData.api_url+'/v1/order/no_meet', 'POST', formData).then((res) => {
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							});
							if(res.data.code == 0)
							{
								that.load_order_detail(); //加载订单详情
							}else
							{
								app.is_login_check(res.data);
								app.is_techn_check(res.data);
							}
						});
					}
				}
			});
		},
		/**
		 * 立即补单
		 */
		repairFun:function()
		{
			//console.log('技师补单');
			var that = this;
			let formData = {
				order_id:that.order_id
			};
			//网络请求
			request(app.globalData.api_url+'/v1/repair/add', 'POST', formData).then((res) => {
				if(res.data.code == 0)
				{
					//调用支付
					that.repair_pay(res.data.data.order_id);
				}else
				{
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					});
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		},
		/**
		 * 技师补单调用支付
		 */
		repair_pay:function(order_id)
		{
			//console.log(order_id)
			if(order_id)
			{
				var that = this;
				//网络请求
				request(app.globalData.api_url+'/v1/repair/pay', 'POST', {order_id:order_id}).then((res) => {
					if(res.data.code == 0)
					{
						uni.requestPayment({
							provider:'wxpay',
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success:function(p_res)
							{
								that.load_order_detail(); //加载订单详情
							},
							fail:function()
							{
								uni.showToast({
									title:'支付失败',
									icon:'none'
								});
							}
						});
					}else
					{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
						app.is_login_check(res.data);
						app.is_techn_check(res.data);
					}
				});
			}
		},
		/**
		 * 联系客户
		 */
		contactFun:function()
		{
			var that = this;
			//网络请求
			let formData = {
				order_id:that.order_id
			};
			//网络请求
			request(app.globalData.api_url+'/v1/order/contact_client', 'POST', formData).then((res) => {
				uni.showToast({
					title:res.data.msg,
					icon:'none'
				});
				if(res.data.code == 0)
				{
					uni.makePhoneCall({
						phoneNumber:res.data.data.secretNo
					});
				}else
				{
					app.is_login_check(res.data);
					app.is_techn_check(res.data);
				}
			});
		}
    }
}
</script>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
/* radio 选中后的样式 */
/deep/.uni-radio-input-checked{
	background-color: rgb(36,201,107)!important;
	border-color: rgb(36,201,107)!important;
	background-clip: content-box!important;
	box-sizing: border-box;
}
.content{
	.order-pop{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index:1000;
		background-color:$uni-bg-color-mask;
		.pop-area{
			padding:30rpx;
			position: absolute;
			left:50rpx;
			right:50rpx;
			top:20%;
			background-color: #fff;
			border-radius: 20rpx;
			.pop-tit{
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
			}
			.pop-con{
				padding:30rpx 20rpx;
				font-size: 28rpx;
				.eva-star{
					margin-bottom: 10rpx;
					text{
						display: inline-block;
						margin-bottom: 20rpx;
						padding:5rpx 20rpx;
						border: 2rpx solid  $uni-text-color-grey;
						color: $uni-text-color-grey;
						font-size: 24rpx;
						border-radius: 20rpx;
						margin-right: 20rpx;
						&.eva-act{
							border: 2rpx solid $uni-text-color-active;
							color:$uni-text-color-active;
						}
					}
				}
				.eva-star1{
					margin-top:30rpx;
					text{
						color: #fff;
						background-color:$uni-text-color-active;
						border: 2rpx solid $uni-text-color-active;
					}
				}
				.place-rem-tit{
					display: flex;
					font-size: 28rpx;
					margin-bottom: 20rpx;
					justify-content:space-between;
					text{
						display: inline-block;
						flex: 1;
						&:first-child{
							font-weight: bold;
						}
						&:last-child{
							font-size: 24rpx;
							color: $uni-text-color-grey;
						}
					}
				}
				.feed-tit{
					font-size:28rpx;
					margin-bottom: 10rpx;
					text{
						font-size: 20rpx;
						color: $uni-text-color-grey;
					}
				}
				.feed-con{
					margin-bottom:10rpx;
					.apply-img{
					  width: 150rpx;
					  height: 150rpx;
					  overflow: hidden;
					  display: inline-block;
					  position: relative;
					  margin:10rpx 10rpx 0 0;
					}
					.photo{
					  width: 150rpx;
					  height: 150rpx;
					}
					.del{
					  width: 30%;
					  position: absolute;
					  right:5rpx;
					  top: 5rpx;
					}
					.feed-text{
						padding:20rpx;
						font-size: 28rpx;
						border-radius: 20rpx;
						background-color: $uni-bg-color-grey;
					}
					.feed-input{
						margin: 20rpx 0 0;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 20rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
						background-color: $uni-bg-color-grey;
					}
					text{
						width: 31%;
						height: 60rpx;
						font-size: 28rpx;
						margin: 10rpx 18rpx 10rpx 0;
						line-height: 60rpx;
						border-radius:30rpx;
						display: inline-block;
						text-align: center;
						background-color: $uni-bg-color-grey;
						&:nth-child(3n){
							margin: 10rpx 0 10rpx 0;
						}
						&.feed-act{
							color: #fff;
							background-color: $uni-text-color-active;
						}
					}
				}
			}
			.pop-btn{
				display: flex;
				text{
					margin:10rpx 20rpx 0;
					flex: 1;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
					font-size: 28rpx;
					border:2rpx solid $uni-text-color-grey;
					color: $uni-text-color-grey;
					&:last-child{
						border:2rpx solid $uni-text-color-active;
						background-color:$uni-text-color-active;
						color: #fff;
					}
				}
			}
		}
	}
	.order-plan{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.order-no{
			margin-bottom:30rpx;
			text{
				font-size:28rpx;
				&:last-child{
					margin-left: 20rpx;
					color:$uni-text-color-active;
				}
			}
		}
		.tra-con {
			overflow: hidden;
			position: relative;
			&::before{
				content: " ";
				position: absolute;
				left:15rpx;
				top:12rpx;
				width:1rpx;
				bottom: 0;
				border-left:6rpx solid #ddd;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-transform: scaleX(0.5);
				transform: scaleX(0.5);
			}
			.order-l{
				display: flex;
				margin-bottom:30rpx;
				.order-i {
					flex: 1;
					position: absolute;
					left:0;
					z-index: 100;
					text{
						background-color: #fff;
						&.icon-dui{
							color:$uni-text-color-active;
						}						
					}
				}
				.order-b{
					position: relative;
					flex: 5;
					left: 50rpx;
					.order-n{
						font-weight:bold;
						font-size:30rpx;
						margin-bottom: 10rpx;
					}
					.order-m{
						margin-top: 20rpx;
						image{
							width:250rpx;
							height:150rpx;
							margin:0 10rpx 5rpx;
						}
					}
					.order-t{
						font-size: 24rpx;
						color: $uni-text-color-grey;
					}
					.order-d{
						text{
							font-size: 24rpx;
							&::before{
								color:$uni-text-color-active;
								margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
	}
	.order-tp{
		height:300rpx;
		position: relative;
		.order-bg{
			width: 100%;
			height:150rpx;
			background-color: $uni-text-color-active;
			text{
				color: #fff;
				line-height:100rpx;
				margin-left:40rpx;
			}
		}
		.order-state{
			position: absolute;
			left: 0;
			right: 0;
			top:80rpx;
			display:flex;
			margin:30rpx 20rpx;
			padding:30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.order-li{
				flex: 1;
				text-align: center;
				.order-icon{
					text{
						margin-bottom: 10rpx;
						display: inline-block;
						font-size:40rpx;
						border-radius: 50%;
						padding: 20rpx;
						border:2rpx solid $uni-text-color-grey;
						color: $uni-text-color-grey;
					}
				}
				.order-name{
					font-size: 24rpx;
				}
			}
			.order-step{
				flex: 1;
				text-align: center;
				.order-icon{
					text{
						margin-bottom: 10rpx;
						display: inline-block;
						font-size:40rpx;
						border-radius: 50%;
						padding: 20rpx;
						border:2rpx solid$uni-text-color-active;
						color:$uni-text-color-active;
					}
				}
				.order-name{
					font-size: 24rpx;
					color:$uni-text-color-active;
				}
			}
		}
	}
	.tech-order{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		padding: 40rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-top:1px solid #eee;
		background-color: #fff;
		.tech-price{
			text{
				font-size:28rpx;
				&:last-child{
					font-weight: bold;
					color: #ff0000;
				}
			}
		}
		.tech-btn{
		   text{
		    margin-left: 20rpx;
		    padding:15rpx 30rpx;
		    color: #fff;
		    font-size:24rpx;
		    border-radius:40rpx;
		    background-color:$uni-text-color-active;
		    &.tech-act{
		     background: none;
		     border:2rpx solid $uni-text-color-grey;
		     color: $uni-text-color-grey;
		    }
		   }
		  }
	}
	.place-agree{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 28rpx;
		radio{
			transform: scale(0.7);
		}
		text{
			color:$uni-text-color-active;
		}
	}
	.place-pay{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-pay-tp{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			border-bottom:1px solid #eee;
			padding-bottom:10rpx;
			margin-bottom:10rpx;
			.place-pay-name{
				flex:2;
				font-size:28rpx;
				position: relative;
				&::before{
					font-size:50rpx;
					position: absolute;
					top:0;
					color:$uni-text-color-active;
				}
				text{
					margin-left:60rpx;
				}
			}
			.place-pay-radio{
				flex: 1;
				text-align: right;
				transform: scale(0.7);
			}
		}
		.place-pay-bot{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			.place-pay-name{
				flex:2;
				font-size:28rpx;
				position: relative;
				&::before{
					font-size:45rpx;
					position: absolute;
					top:0;
					color:$uni-text-color-active;
				}
				text{
					&:first-child{
						margin-left:60rpx;
					}
					&:last-child{
						font-size:24rpx;
						margin-left:10rpx;
						color: $uni-text-color-grey;
					}
				}
			}
			.place-pay-radio{
				flex: 1;
				text-align: right;
				transform: scale(0.7);
			}
		}
	}
	.place-rem{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-rem-tit{
			display: flex;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			justify-content:space-between;
			text{
				display: inline-block;
				flex: 1;
				&:first-child{
					font-weight: bold;
				}
				&:last-child{
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}
			}
		}
		.place-rem-con{
			textarea{
				border-radius: 20rpx;
				font-size: 28rpx;
				padding: 20rpx;
				background-color:rgba(0, 0, 0, 0.05);
			}
		}
	}
	.place-time{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.place-time-tp{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			.place-time-name{
				flex: 1;
				font-size:28rpx;
				color: $uni-text-color-grey;
			}
			.place-time-con{
				flex: 2;
				text-align: right;
				vertical-align: middle;
				text{
					font-size:28rpx;
				}
			}
		}
		.place-time-bt{
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			.place-time-name{
				flex: 1;
				font-size:28rpx;
				font-weight: bold;
			}
			.place-time-con{
				flex: 2;
				text-align: right;
				text{
					&:first-child{
						font-size:28rpx;
						color:#ff0000;
					}
				}
				label{
					font-size: 28rpx;
					radio{
						transform: scale(0.7);
					}				
				}

			}
		}
		.place-km{
			margin-top:10rpx;
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}
	}
	.place-addr{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		.place-rem-tit{
			display: flex;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			justify-content: space-between;
			text{
				&:first-child{
					font-weight: bold;
				}
				&:last-child{
					font-size: 24rpx;
					color: $uni-text-color-active;
				}
			}
		}
		.place-name1{
			text{
				font-size:30rpx;
				font-weight: bold;
			}
		}
		.place-name{
		   margin-bottom: 0.3rem;
		   text{
		    &:nth-child(1){
		     font-size:30rpx;
		     font-weight: bold;
		    } 
		    &:nth-child(2){
		     margin-left: 20rpx;
		     font-size:28rpx;
		     color: rgb(119,119,119);
		    }
		    &:nth-child(4){
		     margin-left: 20rpx;
		     font-size:28rpx;
		     color: $uni-text-color-active;
		     border:1px solid $uni-text-color-active;
		     padding: 6rpx 10rpx;
		     border-radius:24rpx;
		    }
		    &:nth-child(3){
		     margin-left: 20rpx;
		     font-size:28rpx;
		     color: $uni-text-color-active;
		    }
		   }
		  }
		.place-addr-con{
			font-size:28rpx;
			text{
				&:last-child{
					margin-left: 20rpx;
					font-size:28rpx;
					color: $uni-text-color-active;
				}
			}
		}
	}
	.tech-con{
		margin:30rpx 20rpx;
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: rgba(0, 0, 0, 0.1) 0 12rpx 12rpx;
		.tech-con-tp{
			display: flex;
			.tech-img{
				width:120rpx;
				height:120rpx;
				border-radius:50%;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
				}
			}
			.tech-int{
				flex:1;
				.tech-name{
					display: flex;
					flex: 2;
					.tech-photo{
						flex: 2;
						text{
							&:first-child{
								font-size: 32rpx;
								font-weight: bold;
								margin-right: 20rpx;
							}
							&:last-child{
								padding: 4rpx 8rpx;
								font-size:24rpx;
								border-radius: 10rpx;
								color: $uni-text-color-active;
								border:1px solid $uni-text-color-active;
							}
						}						
					}
					.tech-time{
						flex: 1.5;
						text-align: right;
						text{
							color: rgb(119,119,119);
							font-size: 24rpx;
							&:last-child{
								margin-left:4rpx;
								padding: 0 6rpx;
								color: $uni-text-color-active;
								background-color:#e3fffd;
								font-weight: bold;
							}
						}
					}
				}
				.tech-col{
					margin:16rpx 0;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					.tech-col-lf{
						text{
							&:first-child{
								color:#fb8100;
								margin-right:20rpx;
							}
						}
					}
					.tech-col-rt{
						text{
							font-size: 28rpx;
							&:before{
								color: $uni-text-color-active;
							}
						}
					}
				}
			}
		}
		.tech-con-bot{
			margin-top:20rpx;
			display: flex;
			.tech-state{
				width: 120rpx;
				text-align: center;
				margin-right: 20rpx;
				text{
					padding: 2rpx 16rpx;
					border-radius:20rpx;
					color: #fff;
					background-color: $uni-text-color-active;
					font-size:24rpx;
					&.tech-ser{
						background-color: #ff0000;
					}
				}
			}
			.tech-eva{
				display: flex;
				flex: 1;
				justify-content: space-between;
				.tech-eva-lf{
					text{
						color:rgb(119,119,119);
						font-size:28rpx;
						margin-right:18rpx;
						&.icon-xinheart118:before{
							color: $uni-text-color-active;
						}
					}
				}
				.tech-eva-rt{
					text{
						padding:6rpx 16rpx;
						border-radius:12rpx;
						color: #fff;
						background-color: $uni-text-color-active;
						font-size:28rpx;
					}
				}
			}
		}
	}

	.tech-eva-con{
		margin:30rpx 20rpx;
		border-radius:20rpx;
		padding:20rpx 30rpx;
		background-color: #fff;
		.place-rem-tit{
			font-size: 28rpx;
			margin: 20rpx 0;
			text{
				&:first-child{
					font-weight: bold;
				}
				&:last-child{
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}
			}
		}
		.tech-eva-int{
			display: flex;
			padding-bottom:30rpx;
			border-bottom: 1px solid #eee;
			.tech-eva-img{
				width:100rpx;
				height:100rpx;
				border-radius:50%;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
				}
			}
			.tech-eva-rec{
				flex: 1;
				.tech-eva-tit{
					margin-bottom:10rpx;
					text{
						&:first-child{
							font-size: 32rpx;
							margin-right: 10rpx;
						}
						&:last-child{
							font-size:28rpx;
							color:rgb(119,119,119);
						}
					}
				}
				.tech-eva-des{
					font-size:24rpx;
					color:rgb(119,119,119);
				}
			}
		}
		.tech-eva-int1{
			display: flex;
			padding:30rpx 0;
			border-bottom: 1px solid #eee;
			.tech-eva-img1{
				width:60rpx;
				height:60rpx;
				border-radius:50%;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
				}
			}
			.tech-eva-rec1{
				flex: 1;
				.tech-eva-tit1{
					display: flex;
					margin-bottom:10rpx;
					justify-content: space-between;
					.tech-eva-tit-lf{
						text{
							&:first-child{
								font-size:28rpx;
								margin-right: 10rpx;
							}
							&.icon-xingxing{
								font-size:28rpx;
								color:#fb8100;
							}
						}							
					}
					.tech-eva-time{
						font-size: 24rpx;
						color:rgb(119,119,119);
						margin-top: 10rpx;
					}
				}
				.tech-eva-des1{
					font-size:28rpx;
					color:rgb(119,119,119);
					.tech-eva-tag{
						text{
							display: inline-block;
							font-size: 24rpx;
							border-radius: 20rpx;
							padding:6rpx 15rpx;
							margin:10rpx 10rpx 0 0;
							background-color:#eee;
						}
					}
					.tech-eva-des2{
						margin-top: 20rpx;
						font-size: 24rpx;
					}
				}
			}
		}
		.service{
			display: flex;
			padding:30rpx 10rpx;
			border-bottom:1px solid #eee;
			&:last-child{
				border-bottom:none;
			}
			.ser-img{
				width:160rpx;
				height:160rpx;
				border-radius: 14rpx;
				background-position:50%;
				background-repeat:no-repeat;
				background-size: cover;
				margin-right: 20rpx;
			}
			.ser-con{
				flex: 1;
				.ser-tit{
					display: flex;
					justify-content:space-between;
					text{
						&:first-child{
							font-weight: bold;
							font-size:30rpx;
						}
						&:last-child{
							font-size:24rpx;
							text-align: right;
							color: $uni-text-color-grey;
						}
					}
				}
				.ser-des{
					font-size:24rpx;
					color: $uni-text-color-grey;
					margin: 14rpx 0 18rpx;
				}
				.ser-pri{
					display: flex;
					.ser-pri-lf{
						flex: 2;
						text{
							&:first-child{
								padding: 0 6rpx;
								color:rgb(255,225,177);
								font-size:20rpx;
								background-color: #000;
							}
							&:nth-child(2){
								font-size:32rpx;
								font-weight: bold;
								color:#ff0000;
								margin: 0 2rpx 0 15rpx;
								&::before{
									content:"￥";
									font-weight: normal;
									font-size:24rpx;
								}
							}
							&:last-child{
								font-size:20rpx;
								text-decoration: line-through;
								color: $uni-text-color-grey;
							}
						}
					}
					.ser-pri-rt{
						flex: 1;
						text-align: right;
						text{
							&.icon-jianshao{
								font-size:34rpx;
								color: $uni-text-color-active;
							}
							&.num{
								margin: 0 20rpx;
								font-size:28rpx;
							}
							&.icon-node-add_fill{
								font-size:36rpx;
								color:$uni-text-color-active;
							}
						}
					}
				}
			}
		}
	}
	.detail-sel{
		padding: 20rpx;
		position:fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		text-align: center;
		.detail-btn{
			height:70rpx;
			line-height: 70rpx;
			border-radius: 35rpx;
			color: #fff;
			font-size: 28rpx;
			background-color:$uni-text-color-active;
		}
	}
	.h110{
		width: 100%;
		height:130rpx;
	}
}
</style>